<template>
    <div class="form-main">
        <el-page-header :content="route.params.id?'修改广告':'添加广告'" @back="closeTab"></el-page-header>
        <div class="form-content">
            <el-form :model="formData" ref="formRef" label-width="100px">  
                <el-form-item label="唯一标识" prop="identity" :rules="[{required: true,message: '请输入唯一标识',trigger: 'blur'}]">
                    <el-input v-model="formData.identity" placeholder="请输入唯一标识"/>
                </el-form-item>
                <el-form-item label="广告名" prop="name" :rules="[{required: true,message: '请输入广告名',trigger: 'blur'}]">
                    <el-input v-model="formData.name" placeholder="请输入广告名"/>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="formData.desc" type="textarea" :rows="4" placeholder="请输入描述"/>
                </el-form-item>
                <el-form-item label="状态" prop="status" :rules="[{required: true,message: '请选择状态',trigger: 'blur',type:'number'}]">
                    <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
                </el-form-item>
                <el-form-item label="广告内容" prop="banners" :rules="[{required: true,message: '请设置广告内容',trigger: 'blur',type:'array'}]">
                    <div class="banner-content" v-for="(item,index) in formData.banners" :key="index">
                      <div class="banner-item">
                        <el-input v-model="item.title" placeholder="标题"></el-input>
                      </div>
                      <div class="banner-item">
                        <el-input v-model="item.link" placeholder="跳转链接"></el-input>
                      </div>      
                      <div class="banner-item">
                        <el-input-number v-model="item.sort" placeholder="排序"></el-input-number>
                      </div>
                      <div class="banner-item">
                        <uploadimg dir="banner_image" v-model="item.image" />
                      </div>   
                      <div class="banner-item">
                        <el-input v-model="item.desc" type="textarea" :rows="4" placeholder="描述"></el-input>
                      </div>     
                      <div>
                        <el-button v-if="index==formData.banners.length-1" type="success" plain @click="addContent">添加内容</el-button>
                        <el-button v-if="index>0" type="danger" plain @click="delContent(index)">删除内容</el-button>
                      </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button class="form-submit-btn" type="primary" :loading="loading" @click="handleSubmit(formRef)">提交</el-button>
                </el-form-item> 
            </el-form>
        </div>
    </div>    
</template>



<script setup lang="ts">
import {ref,unref} from 'vue'
import { ElForm, ElNotification } from 'element-plus'
import { add,edit,detail } from '/@/api/banner'
import uploadimg from '/@/components/uploadimg/index.vue'
import {formData as formDataType} from './type'
import { useRoute } from 'vue-router'
import useCloseTab from '/@/hooks/useCloseTab'
const route = useRoute()
const formRef = ref()
const loading = ref(false)
const formData = ref<formDataType>({
  banners: [],
  desc:'',
  identity: '',
  name: '',
  status: 1
})
const { closeTab } = useCloseTab()

const getDetail = async () => {
    const {data} = await detail(Number(route.params.id))
    formData.value = data
}

const handleSubmit = (formEl: InstanceType<typeof ElForm> | undefined) => {
   if (!formEl) return
   formEl.validate(async (valid) => {
   if (valid) {
      loading.value = true
      try{
         const req = unref(formData)
         if(route.params.id){
            await edit(Number(route.params.id),req)
         }else{
            await add(req)
         }
         ElNotification({
            type: 'success',
            message: '提交成功'
         })
         closeTab()
      }finally{
         loading.value = false  
      }     
    }
  })
}

const addContent = () => {
  formData.value.banners.push({
    title:'',
    desc:'',
    image:'',
    link:'',
    sort:0
  });
}

const delContent = (index:number) => {
  formData.value.banners.splice(index,1);
}

if(route.params.id){
  getDetail()
}else{
  formData.value.banners.push({
    desc: '',
    image: '',
    link: '',
    sort: 0,
    title: ''
  })
}

</script>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'banner-form',
})
</script>

<style scoped lang="scss">
.banner-content{
  width:100%;
  margin-bottom:20px;
  padding:20px;
  border-radius: 4px;
  border:1px solid #DCDFE6;
}
.banner-item{
  margin-bottom:20px;
}
</style>